<script setup lang="ts">
import CdlTable from "@/components/table";
import {Mode, Query, State} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, h} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Shipper} from "@/interfaces/views/vehicle/shipper";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {createPopup} from "@/utils/createPopup";
import AuthenticationInfo from "@/views/vehicleManage/shipper/authenticationInfo.vue";
// import {ElImage} from "element-plus";
// import constant from "@/utils/constant";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/shipper",
}
const state = reactive<State<Query<Shipper>, Shipper>>({
  queryForm: {
    status: 3
  },
  dataList: []
})
const {query} = useTablePagingTemplate(request, state)

const tree: TableTree<Shipper> = {
  colRule: [
    {ti: "托运人名称", prop: "contact"},
    {ti: "托运人全称", prop: "name"},
    {ti: "绑定手机", prop: "mobile"},
    {ti: "统一社会信用代码或个人证件号", prop: "idNum", width: 220},
    {ti: "申请时间", prop: "filedTime"},
    // {ti: "法人身份证", prop: "legalPersonIdCardImg", slot: (id)=>{
    //     console.log(id)
    //     return h(ElImage, {
    //       src: constant.downloadUrl + id,
    //       previewSrcList: [constant.downloadUrl + id],
    //       previewTeleported: true,
    //     })
    //   }},
    // {ti: "营业执照", prop: "businessLicenseImg"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "认证", type: "primary", prop: "id", method: openCreateShipperAuthentication, auth: "vehicle:shipper:auth"}
  ]
}

function openCreateShipperAuthentication(id: string){
  createPopup("身份认证信息", h(AuthenticationInfo, {
    id: id,
    query: query
  }))
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){

}
</script>

<template>
  <el-card>
<!--    <CdlSearch :model="state.queryForm" :template-tree="searTree"></CdlSearch>-->
    <CdlTable :template-tree="tree" :data="state.dataList"></CdlTable>
  </el-card>
</template>
